<div class="one_third">
    <!--  <div class="one_quarter nogutter"><p></p></div>
     <div class="three_quarter nogutter  ">-->
    <div class="tab-wrapper clear">
        <ul class="tab-nav clear">
            <li><a href="#tab-1">Top Eventos</a></li>
            <li><a href="#tab-2">Top Publicistas</a></li>
        </ul>
        <div class="tab-container">
            <!-- Tab Content -->
            <div id="tab-1" class="tab-content clear">
                <ul class="list tick">
                    <%
                        anuncios = ManejadorAnuncios.getInstance().getAnunciosTop10(con.getConnectionDB());

                        for (Anuncios u : anuncios) {
                    %>
                    <li><a href="#"><%=u.getNombre()%></a></li>
                    <%}%>
                </ul>
            </div>
            <!-- ## TAB 2 ## -->
            <div id="tab-2" class="tab-content clear">
                <ul class="list tick">
                    <%
                        List<Usuarios> usuarios = ManejadorUsuarios.getInstance().getUsuariosTop10(con.getConnectionDB());

                        for (Usuarios u : usuarios) {
                    %>
                    <li><a href="#"><%=u.getNombre()%></a></li>
                    <%}%>
                </ul>
            </div>
            <!-- / Tab Content -->
        </div>
    </div>
    <form action="/PBS/index.jsp" method="post">
        <div class="divider2"></div>
        <center><h2>Buscador</h2></center>
        <div class="two_half nogutter">
            <div class="two_half nogutter">
                <div class="two_half nogutter">
                    <b>Fechas:</b>
                </div>
                <br/>
                <div class="two_half nogutter">
                    <div class="two_fifth nogutter">
                        Desde:
                    </div>
                    <div class="three_fifth nogutter">
                        <input type="date" name="fechaDesde" value="" class="two_half nogutter required">
                    </div>
                    <br/>
                    <div class="two_fifth nogutter">
                        Hasta:
                    </div>
                    <div class="three_fifth nogutter">
                        <input type="date" name="fechaHasta" value="" class="two_half nogutter">
                    </div>
                </div>
            </div>
            <br/><br/><br/>
            <div class="two_half nogutter">
                <div class="two_fifth nogutter">
                    <b>Categor&iacute;a:</b>
                </div>
                <div class="three_fifth nogutter">
                    <select id="categoria" name="categoria" class="four_fifth nogutter">

                        <option value="0" selected>Seleccionar</option>
                        <%
                            List<Categorias> profeciones = ManejadorCategorias.getInstance().getCategorias(con.getConnectionDB());

                            for (Categorias t : profeciones) {
                        %>
                        <option value="<%=t.getId()%>"><%=t.getDescripcion()%></option> 
                        <%}%>
                    </select>
                </div>
            </div>
            <br/><br/>
            <div class="two_half nogutter">
                <div class="two_fifth nogutter">
                    <b>Ciudad:</b>
                </div>
                <div class="three_fifth nogutter">
                    <select id="ciudad" name="ciudad" class="four_fifth nogutter">

                        <option value="0" selected>Seleccionar</option>
                        <% List<Ciudad> ciudades = ManejadorCiudad.getInstance().getCiudades(con.getConnectionDB());
                            for (Ciudad t : ciudades) {
                        %>
                        <option value="<%=t.getId()%>"><%=t.getDescripcion()%>, <%=t.getProvincias().getRegiones().getPais().getDescripcion()%></option> 
                        <%}%>
                    </select>
                </div>
            </div>
            <br/><br/>
            <div class="two_half nogutter">
                <div class="two_fifth nogutter">
                    <b>Artistas:</b>
                </div>
                <div class="three_fifth nogutter">
                    <input type="text" name="artista" value="" class="two_half nogutter">
                </div>
            </div>

            <br/><br/><br/>
            <div class="two_half" style="text-align:  center">
                <div class="two_half">
                    <button type="submit" name="query" class="button small gradient black">
                        <span class="icon-search icon-large"></span>
                        Buscar
                    </button>
                </div>
            </div>
        </div>
        <br/>
        <div class="divider2"></div>
    </form>
</div>